<template>
    <!-- 该组件为回收预约中的继续添加商品组件 -->
    <view class="all">
        <view class="colseshow" @click="CloseWindow"></view>
        <view class="head">
            <text>添加物品</text>
            <image @click="CloseWindow" src="../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <scroll-view scroll-y=true>
                <view class="box">
                    <!-- 选择物品类型 s -->
                    <view class="selecttype" @click="show = true">
                        <text>物品类型</text>
                        <view style="display: flex;justify-content: space-between;"><text style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{selectText}}</text><u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon></view>
                    </view>
                    <!-- 选择物品类型 e -->
                    <!-- 预估重量 s -->
                    <view class="selectkg">
                        <view class="type">
                            <text>预估重量</text>
                        </view>
                        <view class="kgarr">
                            <view :class="{'kg': true, 'seletedkg': sekg === index}" v-for="(item, index) in kgarr"
                                :key="item" @click="selectkg(index, item.text)">
                                <text>{{item.text}}</text>
                            </view>
                        </view>
                    </view>
                    <!-- 上传图片 -->
                    <view class="img">
                        <view class="type">
                            <text>上传图片</text>
                        </view>
                        <view class="kg">
                            <u-upload 
                                ref="upload"
                                :action="baseUrl+'/api/images/upload'"
                                width="150rpx"
                                height="150rpx"
                                :form-data="{code: '999'}"
                                @on-success="uploadSu"
                                @on-remove="oploadRe"></u-upload>
                        </view>
                    </view>
                    <!-- 填写备注 -->
                    <view class="message">
                        <view>
                            <textarea class="textarea" placeholder-style="textarea-placeholder" v-model="wp.remsck" maxlength="140"
                                placeholder="可在点此写入备注或点击下方标签快速 (非必填)"></textarea>
                        </view>
                        <view class="button" @click="clickbutton">
                            <text :id="index" class="buttonclass" v-for="(item, index) in butotnarr" :key="index">{{item}}</text>
                        </view>
                    </view>
                </view>
                <view style="height: 50rpx"></view>
            </scroll-view>

        </view>
        <view class="button">
            <button @click="postedit"><span>确定</span></button>
        </view>
        
        <u-select
            mode="mutil-column-auto"
            v-model="show"
            :list="wptypelist"
            value-name="id"
            label-name="wp_name"
            child-name="plist" 
            @confirm="confirm">
        </u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 预估重量数组
                kgarr: [{
                    text: '0~5KG'
                }, {
                    text: '5~15KG'
                }, {
                    text: '15~30KG'
                }, {
                    text: '30~50KG'
                }, {
                    text: '50~100KG'
                }, {
                    text: '100KG以上'
                }],
                // 快捷标签
                butotnarr: ['自带袋子', '自带纸箱', '自带扳手'],
                sekg: -1,
                index: 0,
                show: false,
                wptypelist: [],
                selectText: '请选择',
                wp: {
                    wp_name: '',
                    remsck: '',
                    weight: '',
                    weightIndex: 0,
                    wsize: '',
                    img: '',
                    imgs: [],
                    imgurls: [],
                    wp_type: [],
                    unit_price: '',
                },
                baseUrl: '',
            };
        },
        mounted() {
            this.baseUrl = this.$store.state.baseUrl;
            this.wptypelist = this.$store.state.wptypelist;
            console.log(this.wptypelist)
        },
        methods: {
            oploadRe(index) {
                this.wp.imgs.splice(index, 1);
                this.wp.imgurls.splice(index, 1);
            },
            uploadSu(data) {
                this.wp.imgs.push(data.data.url);
                this.wp.imgurls.push({url: data.data.url});
            },
            confirm(e) {
                this.selectText = e[1].label;
                this.wp.wp_name = e[1].label;
                // this.wp.wsize = e[2].label;
                this.wp.unit_price = e[1].extra.split(',')[0];
                this.wp.unit = e[1].extra.split(',')[1];
                this.wp.wp_type = [e[0].value,e[1].value];
            },
            // 关闭添加物品弹窗
            CloseWindow() {
                this.$emit('closewin')
            },
            // 确定编辑
            postedit() {
                this.wp.img = this.wp.imgs.join(',');
                if(this.$u.test.isEmpty(this.wp.wp_name)) {
                    uni.showToast({
                        title: '请选择物品',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } else if (this.$u.test.isEmpty(this.wp.weight)) {
                    uni.showToast({
                        title: '请选择重量',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                } 
                // else if (this.$u.test.isEmpty(this.wp.img)) {
                //     uni.showToast({
                //         title: '请上传图片',
                //         duration: 1000,
                //         icon: 'none'
                //     });
                //     return ;
                // }
                 else {
                    this.$emit('myEven', this.wp)
                    this.selectText = '请选择';
                    this.wp = {
                            wp_name: '',
                            remsck: '',
                            weight: '',
                            weightIndex: 0,
                            wsize: '',
                            img: '',
                            imgs: [],
                            wp_type: [],
                    };
                    this.$refs.upload.clear();
                }
            },
            // 点击标签插入文本
            clickbutton(e) {
                if (e.target.id === '0') {
                    this.wp.remsck = '自带袋子'
                }

                if (e.target.id === '1') {
                    this.wp.remsck = '自带纸箱'
                }

                if (e.target.id === '2') {
                    this.wp.remsck = '自带扳手'
                }
            },
            selectkg(index) {
                this.sekg = index
                this.wp.weight = this.kgarr[index].text;
                this.wp.weightIndex = index;
            },
        }
    }
</script>

<style lang="scss" scoped>
    .all {
        position: relative;
        height: 100%;
    }

    .head {
        height: 88rpx;
        background-color: #FFFFFF;

        text {
            margin-left: 30rpx;
            line-height: 88rpx;
        }

        image {
            float: right;
            width: 85rpx;
            height: 85rpx;
        }
    }

    .box {
        padding: 0 30rpx;
        max-height: 800rpx;
        
        picker {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;

            i {
                margin-top: 30rpx;
                float: right;
                width: 0;
                height: 0;
                border: 10rpx solid;
                border-color: #999999 transparent transparent;
            }
        }
    }

    // 物品类型
    .selecttype {
        margin-top: 30rpx;
        padding: 18rpx 0 25rpx 30rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;

        view {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            font-size: 28rpx;
            color: #999999;
            line-height: 60rpx;
            padding-left: 30rpx;
            margin-left: 30rpx;
        }
    }

    // 预估重量
    .selectkg {
        margin-top: 30rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 0 25rpx 0;
        background-color: #ffffff;
        border-radius: 20rpx;

        .kgarr {
            margin: 0 29rpx;
            display: flex;
            // justify-content: space-between;
            // align-items: center;
            flex-wrap: wrap;
            text-align: center;
            line-height: 70rpx;


            .kg {
                margin-top: 10rpx;
                width: 147rpx;
                height: 70rpx;
                background-color: #ffffff;
                border-radius: 35rpx;
                border: solid 2rpx #f2f2f2;
                margin-right: 9rpx;

                font-size: 24rpx;
                color: #999999;
            }

            .seletedkg {
                background-color: #1bc078;
                color: #ffffff;
            }
        }

        .type {
            border-bottom: 1px solid #EEEEEE;
            padding-bottom: 15rpx;
            margin: 0 30rpx;
        }

    }

    // 添加图片
    .img {
        margin-top: 30rpx;
        // height: 273rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 29rpx 25rpx 29rpx;
        background-color: #ffffff;
        border-radius: 20rpx;

        .type {
            height: 98rpx;
            line-height: 98rpx;
            border-bottom: 1px solid #EEEEEE;
            padding-bottom: 15rpx;

            text {
                margin-right: 480rpx;
            }
        }

        .kg {
            margin-top: 30rpx;
            width: 630rpx;
            border-radius: 10rpx;
            background-color: #ffffff;

            image {
                width: 120rpx;
                height: 120rpx;
                margin-right: 20rpx;
                background-color: #f2f2f2;
                border-radius: 10rpx;
            }
        }
    }

    // 备注信息
    .message {
        margin-top: 30rpx;
        height: 306rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;

        .textarea {
            width: 100%;
            font-size: 28rpx;
            color: black;
            height: 190rpx;
            
        }
        .textarea-placeholder {
            color: #cccccc;
            font-size: 28rpx;
        }

        .button {
            height: 0;
            font-size: 24rpx;
            color: #1bc078;
            background-color: #FFFFFF;
        

            .buttonclass {
                display: inline-block;
                background-color: #f0fcf7;
                text-align: center;
                line-height: 50rpx;
                width: 140rpx;
                border-radius: 25rpx;
                border: solid 2rpx #cfefe1;
                margin-right: 20rpx;
            }
        }
    }

    // 确定按钮
    .button {
        // position: flexd;
        // left: 10rpx;
        padding: 20rpx 0;
        height: 140rpx;
        background-color: #EEEEEE;

        button {
            width: 570rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
        }

        span {
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .colseshow {
        width: 750rpx;
        height: calc(100% - 1048rpx);
        opacity: 0.1;
        background-color: #000000;
    }

    .backgroundcolor {
        background-color: #EEEEEE;
    }
</style>
